<template>


  <div class="cube">
    <div class="face1"></div>
    <div class="face2"></div>
    <div class="face3"></div>
    <div class="face4"></div>
    <div class="face5"></div>
    <div class="face6"></div>
  </div>


</template>

<script>
export default {
  name: "test-box"
}
</script>

<style scoped lang="scss">

.cube {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(1deg);
}

.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 0, 0, 0.5);
  //opacity: 0.8;
}

.cube .face1 {
  transform: translateZ(100px);
}

.cube .face2 {
  transform: rotateY(90deg) translateZ(100px);
}

.cube .face3 {
  transform: rotateX(90deg) translateZ(100px);
}

.cube .face4 {
  transform: rotateY(180deg) translateZ(100px);
}

.cube .face5 {
  transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
}

.cube .face6 {
  transform: rotateY(-90deg) rotateX(90deg) translateZ(100px);
}



</style>
